<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Pedestrian Detection</title>
    <!-- Bootstrap 5 stylesheet -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
    <style>
        /* Custom styles */
        body {
            background-color: #f2f2f2;
        }
        .container {
            margin-top: 50px;
        }
        .card {
            margin-bottom: 20px;
        }
        .card-header {
            background-color: #007bff;
            color: #fff;
        }
        .card-body {
            background-color: #fff;
        }
        #image-preview {
            max-width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-8 mx-auto">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">行人计数</h5>
                    </div>
                    <div class="card-body">
                        <form id="upload-form">
                            <div class="mb-3">
                                <label for="file-input" class="form-label">请上传一个图片或视频：</label>
                                <input type="file" class="form-control" id="file-input" accept="image/*, video/*">
                            </div>
                            <div class="mb-3">
                                <label class="form-label">请输入阈值大小：</label>
                                <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
                            </div>
                            <div class="mb-3">
                                <button type="submit" class="btn btn-primary">开始检测</button>
                            </div>
                        </form>
                        <div id="image-preview-container" class="d-none">
                            <img id="image-preview" src="#" alt="Image preview">
                        </div>
                        <div id="result-container" class="d-none">
                            <p class="fs-4">行人数量: <span id="pedestrian-count"></span></p>
                        </div>
                    </div>
                    <div class="card-footer text-muted">
                        <small>Powered by <a href="https://gitee.com/sandwich-eaters-on-the-moon/crowd-counting-demo.git">Group3</a></small>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Bootstrap 5 JavaScript bundle with Popper.js -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // JavaScript code
        const form = document.querySelector('#upload-form');
        const fileInput = document.querySelector('#file-input');
        const imagePreviewContainer = document.querySelector('#image-preview-container');
        const imagePreview = document.querySelector('#image-preview');
        const resultContainer = document.querySelector('#result-container');
        const pedestrianCount = document.querySelector('#pedestrian-count');

        form.addEventListener('submit', (event) => {
            event.preventDefault();

            const file = fileInput.files[0];
            const reader = new FileReader();

            reader.addEventListener('load', (event) => {
                // imagePreview.setAttribute('src', event.target.result);
                // imagePreview.setAttribute('src', '../static/images/pred_map.png');
                // imagePreviewContainer.classList.remove('d-none');

                // 加载中
                imagePreview.setAttribute('src', '../static/images/loading.gif');
                imagePreviewContainer.classList.remove('d-none');

                // wait for 2 seconds
                setTimeout(() => {
                    imagePreview.setAttribute('src', '../static/images/gt_dmap.png');
                    resultContainer.classList.remove('d-none');
                    pedestrianCount.textContent = '1210'; // Placeholder value
                }, 2000);
                

                // TODO: Call pedestrian detection API and update pedestrianCount
                // pedestrianCount.textContent = '172'; // Placeholder value
                // resultContainer.classList.remove('d-none');
            });

            reader.readAsDataURL(file);
        });
    </script>
</body>
</html>